// JavaScript Document

/*
 var proj;
 var heights = [];
 var tn;
 var itemsNo;
 var slides;
 var slider;
 var page = 0;
 */

$(document).ready(function () {

    //init menu
    var selectedMenuPosition = $('li:first-child').outerWidth(true) / 2 - 13;
    $('ul').css('background-position', selectedMenuPosition + 'px' + ' 15px');

    /*

     //load XML

     // code for IE7+, Firefox, Chrome, Opera, Safari
     if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();
     // code for IE6, IE5
     else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

     xmlhttp.open("GET","data.xml",false);
     xmlhttp.send();
     xmlDoc=xmlhttp.responseXML;

     proj = xmlDoc.getElementsByTagName("project");
     tn = xmlDoc.getElementsByTagName("tn");

     var tags = '';

     itemsNo = 0;

     for(i = 0; i < proj.length; i++) {

     tags += '<div class="project">';

     var projTitle = proj[i].getAttribute("title");
     var path = tn[i].getAttribute("path");

     var no = itemsNo;
     itemsNo++;

     tags += '<div class="tn">';
     tags += '<img src="' + path +'" rel="' + no + '">';
     tags += '</div>';
     }

     document.getElementById("projects").innerHTML=tags;

     */

    /*

     //onResize

     $(window).resize(function(){

     $('#main').css({position:'absolute', left: ($(window).width() - $('#main').outerWidth())/2});

     var val = 0;
     if(page != 0) val = heights[page];
     $('#main').css({top: ($(window).height() - $('#main').outerHeight() - val)/2});

     $('#detail').css({position:'absolute', left: ($(window).width() - $('#detail').outerWidth())/2, top: ($(window).height() - $('#detail').outerHeight())/2});

     });

     //init resize

     $(window).resize();

     */

    //assign actions to buttons
    $('li').click(
        function () {
            var index = $(this).index();
            var outerWidth = $(this).outerWidth(true);
            var withUntilNow = 0;

            $('li').each(function (i, item) {
                if (i == index) return false;
                withUntilNow += $(this).outerWidth(true);
            });
            var selectedMenuPosition = withUntilNow + outerWidth / 2 - 13;

            $('ul').animate({
                'backgroundPosition':selectedMenuPosition + 'px 15px'
            }, 500, 'swing', function () {
                // success

            });
        }
    );

    // adding images
    $.getJSON('data/decalsData.json', {format:"json"},function (data) {
        var items = [];

        $.each(data.decals, function (i, item) {
            items.push(
                '<div class="thumb-wrap' + ( (i + 1) % 4 == 0 ? '-odd' : '') + '">' +
                    '<div class="thumb">' +
                    '<div class="thumb-zoom">' +
                    '<div class="infos-off" id="infos-' + i + '">' +
                    '<div class="title">' + item.name + '</div>' +
                    '<div class="picker">' +
                    '<div class="color"></div>' +
                    '</div>' +
                    '<div class="price">' + item.price + ' RON</div>' +
                    '<div class="size">' + item.size + '</div>' +
                    '</div>' +
                    '<img color="' + item.colors + '" src="img/decals/' + item.url + '"/>' +
                    '</div>' +
                    '</div>' +
                    '</div>');
        });

        $('<div/>', {
            id:'decals',
            html:items.join('')
        }).appendTo('#page');

    }).success(function () {
            // adding hover
            $('.thumb').hover(
                function () {
                    $(this).addClass('thumb-over');
                    var thumbIndex = $(this).parents('.thumb-wrap').index();
                    $('#infos-' + thumbIndex).addClass('infos-on');

                }, function () {
                    var thumbIndex = $(this).parents('.thumb-wrap').index();
                    $('#infos-' + thumbIndex).removeClass('infos-on');
                    $(this).removeClass('thumb-over');
                });

            $('.thumb').click(function () {
//                alert(0)
            });

            // zoom
            $(".thumb-zoom").miniZoomPan({sW:230, sH:230, lW:500, lH:500 });

            // colors

        });

    /*

     $('#cover').click(
     function() {
     if(slider == slides.length-1) overOut();
     else{
     slider++;
     slide(slider);
     }
     }
     );

     $('#detail').click(
     function() {

     if(slider == slides.length-1) overOut();
     else{
     slider++;
     slide(slider);
     }

     }
     );

     */

});

//functions

function toggle(p, e) {

    if (p != page) {
        if (page != 0) closeOld(page);

        e.animate({height:'toggle'}, 500);

        repositionMain(p);

        page = p;
    }
    else {
        closeOld(p);
        repositionMain(0);

        page = 0;
    }

} //end function

function closeOld(page) {

    switch (page) {

        case 1:
            $('#s1').animate({height:'toggle'}, 500);
            break;
        case 2:
            $('#s2').animate({height:'toggle'}, 500);
            break;
        case 3:
            $('#s3').animate({height:'toggle'}, 500);
            break;
        case 4:
            $('#s4').animate({height:'toggle'}, 500);
            break;
    }

} //end function

function repositionMain(page) {

    switch (page) {

        case 0:
            $('#main').animate({top:($(window).height() - heights[0]) / 2});
            break;
        case 1:
            $('#main').animate({top:($(window).height() - heights[0] - heights[1]) / 2});
            break;
        case 2:
            $('#main').animate({top:($(window).height() - heights[0] - heights[2]) / 2});
            break;
        case 3:
            $('#main').animate({top:($(window).height() - heights[0] - heights[3]) / 2});
            break;
        case 4:
            $('#main').animate({top:($(window).height() - heights[0] - heights[4]) / 2});
            break;
    }

} //end function

function overOn() {

    $('#cover').show();
    $('#cover').fadeTo(500, 0.95);
    $('#detail').show();
    $('#detail').fadeTo(500, 1);

} //end function

function overOut() {

    $('#cover').fadeTo(500, 0, function () {
        $('#cover').hide();
    });
    $('#detail').fadeTo(500, 0, function () {
        $('#detail').hide();
    });

} //end function

function slide(i) {

    $('#container').replaceWith('<div id="container">' + slides[i] + '</div>');
    $('#detail').css({position:'absolute', left:($(window).width() - $('#detail').outerWidth()) / 2, top:($(window).height() - $('#detail').outerHeight()) / 2});

} //end function

